<template>
  <div id="earth"></div>
</template>

<script>
//首先引入三个包
import echarts from "echarts";
import "echarts-gl";
import world from "echarts/map/js/world.js";
import china from "echarts/map/js/china.js";
import "echarts/map/js/world.js";
import { EleResize } from "../utils/esresize";
import { homeStore } from "../utils/api";

export default {
  name: "Home",
  data() {
    return {
      mapChart: null,
      //设置平面地图的样式
      options: {
        backgroundColor: "#0173B5", // 背景色
        title: {
          show: true
        },
        series: {
          type: "map",
          map: "world",
          top: 0,
          left: 0, // 绘制完整尺寸的 echarts 实例
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90]
          ], // 设置为一张完整经纬度的世界地图
          zoom: 0, //当前视角的缩放比例
          nameMap: {
            China: "中国" // 变成中文
          },
          label: {
            show: true, // 是否显示文本
            color: "#333333" // 文本颜色
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。 默认样试。
            normal: {
              borderColor: "#666666", // 边框线
              borderWidth: 1, // 线宽
              borderType: "dotted" // 支持 'solid', 'dashed', 'dotted'。
            }
          },
          emphasis: {
            // 高亮状态下的多边形和标签样式。
            label: {
              // 文本
              show: true,
              color: "#666666"
            },
            itemStyle: {
              areaColor: "#E0E282" // 区域
            }
          }
        }
      }
    };
  },
  // created() {
  //   this.getHomeMap();
  // },
  mounted() {
    this.getHomeMap();
  },
  destroyed() {
    this.mapChart = null;
  },
  methods: {
    initMap(data) {
      const canvas = document.createElement("canvas");
      const dom = document.getElementById("earth");
      const myChart = echarts.init(dom); // 获取容器并对其初始化
      this.mapChart = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
      });
      // 获取容器并对其初始化
      this.mapChart.setOption(this.options);
      //地球样式绘制
      const options = {
        globe: {
          roam: false, // 是否允许鼠标滚动放大，缩小
          baseTexture: this.mapChart, //贴图 球形和平面的吻合
          silent: true,
          shading: "lambert",
          light: {
            main: {
              color: "#fff", // 光照颜色
              intensity: 0.8, // 光照强度
              shadow: false, // 是否显示阴影
              alpha: 40,
              beta: -30
            },
            ambient: {
              intensity: 0.5
            }
          },
          // 地球是否自己转动 autoRotate为true时自己转动
          viewControl: {
            autoRotate: false,
            animationDurationUpdate: 2000,
            targetCoord: [116.4, 39.9],
            zoomSensitivity: false
          }
        },
        tooltip: {
          trigger: "item",
          confine: true,
          textStyle: {},
          formatter: function(a) {
            let list = [];
            let listItem = "";
            // for (var i = 0; i < a.length; i++) {
            //   list.push(
            //     '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
            //       a[i].color +
            //       ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
            //       a[i].seriesName +
            //       "</span>&nbsp&nbsp功效：" +
            //       a[i].value[0] +
            //       "&nbsp&nbsp专利数量：" +
            //       a[i].value[1] +
            //       "&nbsp&nbsp数量：" +
            //       a[i].value[2]
            //   );
            // }
            listItem = list.join("<br>");
            return '<div class="showBox">' + listItem + "</div>";
          }
        },
        series: [
          {
            type: "scatter3D",
            blendMode: "lighter", //混合模式
            coordinateSystem: "globe", //使用地球坐标系
            zlevel: 2,
            symbolSize: 20, //标记的大小
            symbol: "pin", //标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            itemStyle: {
              color: "red",
              opacity: 1
            },
            label: {
              show: false,
              distance: 10,
              textStyle: {
                fontFamily: "微软雅黑",
                fontSize: 12,
                color: "#688499",
                padding: 10,
                lineHeight: 20
              },
              formatter: function(params) {
                return (
                  "门店名称:  " +
                  params.name +
                  "\n" +
                  "手机号: " +
                  params.data.content.phone +
                  "\n" +
                  "门店负责人:" +
                  params.data.content.realName
                );
              },
              position: "inner"
            },
            data
          }
        ]
      };
      myChart.setOption(options);
      myChart.on("mouseover", function(param) {});
      const listener = function() {
        myChart.resize();
      };
      EleResize.on(dom, listener);
    },
    getHomeMap() {
      this.postRequest(homeStore).then(res => {
        if (res.code == 200) {
          //随机获取点点坐标函数
          const data = [];
          const list = res.data;

          list.forEach(item => {
            data.push({
              content: item,
              name: item.storeName,
              value: [item.pointX, item.pointY]
            });
          });
          this.initMap(data);
        }
      });
    }
  }
};
</script>

<style scoped>
#earth {
  width: 100%;
  height: 600px;
}
</style>
